<template>
  <div id="app">
    <h3>TodoList</h3>
    <div class="header">
      <input
        autofocus
        @keyup.enter="addTodo"
        v-model.trim="newtodo"
        v-count='10'
        class="ipt"
        type="text"
        placeholder="请输入待办事项"
      >
    </div>
    <div class="content">
      <label>
        <input type="checkbox" v-model="allDone">全部完成
      </label>
      <ul class="todoList" v-show="todos.length">
        <li
          class="clear todo"
          :class="{editing:todo == editedTodo,completed:todo.completed}"
          v-for="(todo,index) in filteredTodos"
          :key="index"
        >
          <div class="view">
            <input type="checkbox" v-model="todo.completed">
            <span class @dblclick="editTodo(todo)">{{todo.title}}</span>
            <i class="del" @click="removeTodo(todo)">X</i>
          </div>
          <input
            type="text"
            class="edit"
            v-editfocus="todo==editedTodo"
            v-model="todo.title"
            @blur="doneEdit(todo)"
            @keyup.enter="doneEdit(todo)"
            @keyup.esc="cancelEdit(todo)"
          >
        </li>
      </ul>
    </div>
    <div class="footer">
      <span>剩余{{remaining}}项</span>
      <span>
        <a href="#/all" :class="{selected:visibility=='all'}">全部</a>
        <a href="#/active" :class="{selected:visibility=='active'}">进行中</a>
        <a href="#/completed" :class="{selected:visibility=='completed'}">已完成</a>
      </span>
      <button @click="removeCompleted" v-show="todos.length>remaining">清除已完成</button>
    </div>
  </div>
</template>

<script>
import ls from "./utils/ls.js";
import filter from "./utils/filter.js";
export default {
  name: "App",
  data() {
    return {
      newtodo: "",
      todos: ls.get(),
      editedTodo: null,
      visibility: "all"
    };
  },
  computed: {
    filteredTodos() {
      return filter[this.visibility](this.todos);
    },
    remaining() {
      return filter.active(this.todos).length;
    },
    allDone: {
      get() {
        return this.remaining === 0;
      },
      set(value) {
        this.todos.forEach(function(todo) {
          todo.completed = value;
        });
      }
    }
  },
  methods: {
    addTodo() {
      var val = this.newtodo
      if(!val || val.length<10){
        return
      }
      this.todos.push({
        id: Date.now(),
        title: this.newtodo,
        completed: false
      });
      this.newtodo = "";
    },
    removeTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1);
    },
    editTodo(todo) {
      this.beforeEditCache = todo.title;
      this.editedTodo = todo;
    },
    doneEdit(todo) {
      if (!this.editedTodo) {
        return;
      }
      this.editedTodo = null;
      todo.title = todo.title.trim();
      if (!todo.title) {
        this.removeTodo(todo);
      }
    },
    cancelEdit(todo) {
      this.editedTodo = null;
      todo.title = this.beforeEditCache;
    },
    removeCompleted() {
      this.todos = filter.active(this.todos);
    },
    onHashChange() {
      var nowHash = window.location.hash.replace(/#\/?/, "");
      if (filter[nowHash]) {
        this.visibility = nowHash;
      } else {
        window.location.hash = "";
        this.visibility = "all";
      }
    }
  },
  mounted(){
    window.addEventListener('hashchange',this.onHashChange)
    this.onHashChange()
  },
  watch: {
    todos: {
      handler(todos) {
        ls.save(todos);
      },
      deep: true
    }
  },
  directives: {
    editfocus(el, binding) {
      if (binding.value) {
        el.focus();
      }
    },
    count:{
      inserted(el,binding){
        let span = document.createElement('span')
        span.className = "count"
        span.innerHTML=`(${el.value.length}/${binding.value})`
        el.parentNode.appendChild(span)
      },
      componentUpdated(el,binding){
        el.parentNode.querySelector('.count').innerHTML=`(${el.value.length}/${binding.value})`
      }
    }
  }
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
#app {
  margin-top: 60px;
  position: absolute;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  display: flex;
  flex-wrap: wrap;
}
ul {
  list-style: none;
}
.header,
.content,
.footer {
  flex-basis: 100%;
  margin: 10px 0;
}
.ipt {
  padding: 5px 15px;
}
.del {
  font-style: normal;
  float: right;
  display: none;
}
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.todoList li:hover{
  background-color: #ccc;
}
.todoList li:hover .del {
  display: block;
  cursor: pointer;
  color: red;
}
.todoList .edit,
.todoList .editing .view {
  display: none;
}
.todoList .editing .edit {
  display: block;
}
.todoList .completed {
  text-decoration: line-through;
  color: #d9d9d9;
}
.selected {
  border: 1px solid skyblue;
  background-color: #ccc;
}
a{
  text-decoration: none;
  color: #000;
  padding: 3px;
}
</style>
